<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>

<body>
    <div id="app">
        <runoob></runoob>
        <button-counter></button-counter>
        <button-counter></button-counter>
        <button-counter></button-counter>
        <runoob-a></runoob-a>
        <!-- prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。
            父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：
             一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。 -->
        <site-name title="Google"></site-name>
        <site-name title="Runoob"></site-name>
        <site-name title="Taobao"></site-name>

        <!-- 类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。
            每当父组件的数据变化时，该变化也会传导给子组件： -->
        <site-info v-for="site in sites" :id="site.id" :title="site.title" v-bind:value="myVar"></site-info>
        <input type="text" v-model="myVar">
    </div>

    <script>

        // 注册一个简单的局部组件 runoobA，并使用它：
        var runoobA = {
            template: `<h1>自定义局部组件2！</h1>`
        }
        // 创建一个Vue 应用
        const app = Vue.createApp({
            // 在实例选项中注册局部组件，这样组件只能在这个实例中使用：
            components: {
                'runoob-a': runoobA,
            },
            data() {
                return {
                    sites: [
                        { id: 1, title: 'Google' },
                        { id: 2, title: 'Runoob' },
                        { id: 3, title: 'Taobao' }
                    ],
                    myVar: '111111'
                }
            }
        })

        // 定义一个名为 runoob 的新全局组件
        app.component('runoob', {
            template: '<h1>自定义组件!</h1>'
        })

        app.component('site-name', {
            template: `<h4>{{title}}</h4>`,
            props: ['title'],
        })

        //定义一个名为 button-counter 的新全局组件
        app.component('button-counter', {
            data() {
                return {
                    count: 0,
                }
            },
            template: `<button v-on:click="count++">点了{{count}}次！`
        })

        
        app.component('site-info',{
            //props: id['','title','value'],
            // 增加变量校验：当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。
            props: {
                // 带有默认值的数字
                id: Number,
                // 必填的字符串
                title: {
                    type: String,
                    required: true
                },
                // 带有默认值的字符串
                value: {
                    type: String,
                    default: 111111
                }
            },
            template: `<h4>{{id}} - {{title}} - {{value}}</h4>`,
        })
        app.mount('#app')
    </script>
</body>

</html>